<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>

<head>
    <meta charset="UTF-8">
    <title>路线信息</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>
<div class="app-page" v-cloak id="app">

    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <form class="filter">
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>线路名称</label></div>
                                    <div class="body">
                                        <input type="text" placeholder="请输入线路名称" name="routeName" id="routeName">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>登陆账号</label></div>
                                    <div class="body">
                                        <input type="text" placeholder="请输入登陆账号" name="userName" id="userName">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <a class="z-btn z-primary" @click="initData(1,10)">查询</a>
                            </div>
                        </div>
                    </form>
                    <!-- 关联的选项 End -->
                </div>
            </div>
        </div>

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="container z-df">
                        <table class="z-table">
                            <thead>
                            <th>线路名称</th>
                            <th>线路更新时间</th>
                            <th>所属账号</th>
                            <th>操作</th>
                            </thead>
                            <tbody>

                            <!-- vue 渲染 -->
                            <tr v-for="resultList in routeList" :data-routeVersion="resultList.routeVersion"
                                :data-userIds="resultList.userIds">
                                <td>{{resultList.routeName}}</td>
                                <td>{{resultList.addTime}}</td>
                                <td>{{resultList.userNames}}</td>
                                <td class="btn-group">
                                    <a class="authority-open" data-title="分配线路"
                                       @click="openBindWindow(resultList)">分配线路</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                    </div>

                    <!-- 分页信息 -->
                    <div class="app-card-body">
                        <!-- 前端分页 -->
                        <div class="pagination z-pat z-fr"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 设备操作 -->
    <div class="popup-default z-popup z-fixed z-df z-flex-cc z-hide">
        <!-- 管理授权 -->
        <div class="popup-route-bind section z-hide">
            <div class="title">分配线路</div>
            <div class="content">
                <form>
                    <input type="hidden" name="routeId" id="routeId">
                    <div class="form-item row">
                        <div class="label">
                            <label>用户</label>
                        </div>
                        <div class="users body">
                        </div>
                    </div>
                    <div class="z-btn-group" style="margin-top:30px">
                        <a class="z-btn z-primary" @click="bindRouteUser()">确定</a>
                        <a class="z-btn z-default" data-popup-close>取消</a>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/vue/v2.5.16/vue.min.js}"></script>
<script th:src="@{/js/prompt.js}"></script>
<script th:src="@{/js/table.js}"></script>


<script>
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';

    // 使用vue渲染页面
    var app = new Vue({
        el: '#app',
        data: {
            routeList: [],
        }
    })

    // 初始化分页控件（分页默认参数）
    var pagination = new Pagination(".pagination", {
        pageIndex:1, // 初始化页数
        pageSize:10, // 初始化每页条数
        count:10, // 初始化总记录数（这样写相当于页面首次初始化加载时就展示了第一页）
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) { // 切换到指定分页
            initData(pageIndex, 10);
        }
    })

    /**
     * 加载线路数据
     * @param currentPage
     * @param pageSize
     */
    var initData = function (currentPage, pageSize) {
        var params = {
            routeName: $("#routeName").val(),
            userName: $("#userName").val(),
            pageNum: currentPage,
            pageSize: pageSize
        };
        App.ajax({
            type: "POST",
            url: context + "/route/listdata",
            data: params,
            success: function (obj) {
                var code = obj.code;
                if (code == 0) {
                    //首先清空
                    app.routeList = [];
                    var data = obj.data;
                    var totalCount = obj.data.total;
                    var html = [];
                    for (var i = 0; i < data.list.length; i++) {
                        var item = data.list[i];
                        app.routeList.push(item);
                    }
                    renderPage(totalCount, currentPage, pageSize);
                }
            }
        })
    }

    /**
     * 渲染分页控件化分页
     * @param totalCount
     * @param loadPageIndex
     * @param loadPageSize
     */
    var renderPage = function (totalCount, loadPageIndex, loadPageSize) {
        // 控件参数动态替换
        pagination.options.pageIndex = loadPageIndex;
        pagination.options.pageSize= loadPageSize;
        pagination.options.count= totalCount;
        pagination.render();
    }

    /**
     * 打开绑定线路窗口
     * @param data
     */
    var openBindWindow = function (data) {
        // 授权管理 - 弹窗打开
        var routeVersion = data.routeVersion;
        var routeUserIds = data.userIds;
        //empty first
        $('.users').html("");
        App.ajax({
            type: "POST",
            url: context + "/deviceInfo/getDeviceAuthorityUsersList",
            success: function (obj) {
                var code = obj.code;
                if (code == 0) {
                    var data = obj.data;
                    var html = [];
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        if (routeUserIds == item.userId) {
                            html.push('<label> <input class="input" type="radio" checked="checked" name="userIds" value="' + item.userId + '"> ' + item.realname + ' </label>');
                        } else {
                            html.push('<label> <input class="input" type="radio" name="userIds" value="' + item.userId + '"> ' + item.realname + ' </label>');
                        }
                    }
                    //$('.users').html(html.join(''));
                    $(".users").initTable(html,4)

                }
            }
        })
        // 表单复制
        $(".popup-route-bind").formLoad({
            routeId: routeVersion
        });
        popup.open(".popup-route-bind")
    }

    /**
     *  提交员工线路绑定关系
     */
    var bindRouteUser = function () {
        var data = {};
        $.each($(".popup-route-bind form").serializeArray(), function (index, field) {
            if (data[field.name]) {
                data[field.name] += "," + field.value;
            } else {
                data[field.name] = field.value;
            }
        })
        console.log(data);
        App.ajax({
            type: 'post',
            dataType: 'json',
            url: context + '/route/rel/bind',
            // data: {deviceCodes: deviceCodes, users: users},
            data: data,
            cache: false,
            async: true,
            success: function (data) {
                myAlert(data.msg);
                if (data.code == 0) { //操作成功，刷新当前页面
                    window.location.href = context + "/route/list/index";
                }
            }
        });
    }

    $(function () {
        initData(1, 10);
    });

</script>


</body>

</html>